<template>
  <div id="salvenote">
    <div>
      <span class="title-item">维修列表分页数据</span>
    </div>
    <a-form-model layout="inline" :model="page" :colon="false">
      <a-form-model-item label="排口查询" >
        <a-input v-model="page.equipmentName" placeholder="请输入排口" allow-clear />
      </a-form-model-item>
      <a-form-model-item label="公司查询">
        <a-input v-model="page.taskName" placeholder="请输入公司名" allow-clear></a-input>
      </a-form-model-item>
      <a-form-model-item label="服务部查询">
        <a-select placeholder="请选择服务部" v-model="page.taskArea" show-search :filter-option="filterOption" allowClear style="width: 190px">
          <a-select-option :value="v.id" v-for="v in selectData" :key="v.id">{{ v.name }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item>
        <a-button type="primary" @click="onSubmit">查询</a-button>
      </a-form-model-item>
    </a-form-model>
    <div class="tableclass">
      <my-table
        style="min-height: 94%"
        :data-source="data"
        :pagination="false"
        :columns="columns"
        :rowKey="(record) => record.id"
      >
        <span slot="action" slot-scope="text, action">
          <a class="solvebtn" @click="showModal(action)">详情</a>
        </span>
        <template
          slot="pictureAssociation"
          class="solve-img"
          slot-scope="pictureAssociation"
        >
          <div v-viewer>
            <img
              class="byimg"
              :src="img.picId"
              data-first-index="0"
              :data-secondIndex="indexs"
              v-for="(img, indexs) in pictureAssociation"
              :key="indexs"
              alt
            />
          </div>
        </template>
        <template
          slot="pictureAssociationOne"
          class="solve-img"
          slot-scope="pictureAssociationOne"
        >
          <div v-viewer>
            <img
              class="byimg"
              :src="img.picId"
              data-first-index="0"
              :data-secondIndex="indexs"
              v-for="(img, indexs) in pictureAssociationOne"
              :key="indexs"
              alt
            />
          </div>
        </template>
      </my-table>
      <div class="bottompage">
        <a-pagination
          :show-total="(total) => `共 ${total} 条记录`"
          :item-render="itemRender"
          v-model="page.current"
          :total="total"
          :defaultPageSize="page.size"
          @change="pagechangeFn"
          show-less-items
        />
      </div>
      <!-- 表格弹出框 -->
      <a-modal
        width="75%"
        :visible="visible"
        :confirm-loading="confirmLoading"
        @cancel="handleCancel"
        :footer="null"
      >
        <template v-if="detail.start == 1">
          <div class="table-all" v-if="visible">
            <a-row :span="24" class="shuju">
              <div
                @click="Yrepair"
                style="width: 100px; margin-left: 90%; cursor: pointer"
              >
                <a-icon type="cloud-download" style="color: #fff" />
                导出数据
              </div>
            </a-row>
            <a-row>
              <a-col :span="24" class="bordertop">CEMS维修记录表</a-col>
              <a-col :span="3" class="borderall"> 安装地点 </a-col>
              <a-col :span="9" class="borderallone">
                {{ smokerepair.taskEquipmentInfoPoList.monitorName }}</a-col
              >
              <a-col :span="4" class="borderallone"> 停机时间 </a-col>
              <a-col :span="8" class="borderallone">
                {{ smokerepair.downtime }}</a-col
              >
              <a-row
                v-for="(item, index) in smokerepair.inspectionReportPo"
                :key="index"
              >
                <a-col :span="6" class="borderalltwo">
                  {{ item.superiorField }}
                </a-col>
                <a-col
                  :span="9"
                  class="borderallone"
                  v-for="(list, i) in item.overall"
                  :key="i"
                  >{{ list.field }}
                  <a-col class="borderallone">{{ list.situation?list.situation:"/"}}</a-col>
                </a-col>
              </a-row>
              <a-col :span="6" class="borderalltwo"> 维修后系统运行情况 </a-col>
              <a-col :span="18" class="borderallthree"
                >{{ smokerepair.afterMaintenance }}
              </a-col>
              <a-col :span="6" class="borderalltwo"> 站房清理 </a-col>
              <a-col :span="18" class="borderallthree">
                {{ smokerepair.stationClean }}</a-col
              >
              <a-col :span="6" class="borderalltwo"> 停机检修情况总结 </a-col>
              <a-col :span="18" class="borderallthree"
                >{{ smokerepair.shutdownMaintenance }}
              </a-col>
              <a-col :span="6" class="borderalltwo"> 备注 </a-col>
              <a-col :span="18" class="borderallthree">
                {{ smokerepair.note }}</a-col
              >
              <a-col :span="6" class="borderall"> 检修人 </a-col>
              <a-col :span="6" class="borderallone">{{
                smokerepair.maintenancePersonnel
              }}</a-col>
              <a-col :span="6" class="borderallone"> 离开时间 </a-col>
              <a-col :span="6" class="borderallone"
                >{{ smokerepair.departureTime }}
              </a-col>
            </a-row>
            <a-col class="border-img">
              <a-col :span="4" class="border-img1">维修过程</a-col>
              <a-col :span="20" v-viewer>
                <img
                  :src="img.picId"
                  alt=""
                  v-for="(img, imgIndex) in smokerepair.pictureAssociation"
                  :key="imgIndex"
                  class="img"
                />
              </a-col>
            </a-col>
            <a-col
              class="border-img"
              v-if="smokerepair.pictureAssociationOne.length > 0"
            >
              <a-col :span="4" class="border-img1">维修记录</a-col>
              <a-col :span="20" v-viewer>
                <img
                  :src="img.picId"
                  alt=""
                  v-for="(img, imgIndex) in smokerepair.pictureAssociationOne"
                  :key="imgIndex"
                  class="img"
                />
              </a-col>
            </a-col>
          </div>
        </template>
        <template v-if="detail.start == 2">
          <div class="table-all" v-if="visible">
            <a-row :span="24" class="shuju">
              <div
                @click="Wrepair"
                style="width: 100px; margin-left: 90%; cursor: pointer"
              >
                <a-icon type="cloud-download" style="color: #fff" />
                导出数据
              </div>
            </a-row>
            <a-row>
              <a-col :span="24" class="bordertop"
                >水污染源自动监测设备故障维修记录表</a-col
              >
              <a-col :span="4" class="borderall">设备名称</a-col>
              <a-col :span="4" class="borderallone">
                {{ waterrepair.taskEquipmentInfoPoList.monitorName }}
              </a-col>
              <a-col :span="4" class="borderallone">规格型号</a-col>
              <a-col :span="4" class="borderallone"> 水污染</a-col>
              <a-col :span="4" class="borderallone">设备编号</a-col>
              <a-col :span="4" class="borderallone">
                {{ waterrepair.taskEquipmentInfoPoList.name }}
              </a-col>
              <a-col :span="4" class="borderallfive">故障情况及发生时间</a-col>
              <a-col :span="20">
                <a-row :span="20" class="borderallsix">
                  {{ waterrepair.faultCondition }}
                </a-row>
                <a-row>
                  <a-col :span="6" class="borderallone">维修人</a-col>
                  <a-col :span="6" class="borderallone">
                    {{ waterrepair.repairman }}
                  </a-col>
                  <a-col :span="6" class="borderallone">日期</a-col>
                  <a-col :span="6" class="borderallone">
                    {{ waterrepair.repairTime }}
                  </a-col>
                </a-row>
              </a-col>
              <a-col :span="4" class="borderallfive"
                >修复后使用前校验时间校验结果说明</a-col
              >
              <a-col :span="20">
                <a-row :span="20" class="borderallsix">{{
                  waterrepair.afterRepair
                }}</a-row>
                <a-row>
                  <a-col :span="6" class="borderallone">校验人</a-col>
                  <a-col :span="6" class="borderallone">{{
                    waterrepair.verifier
                  }}</a-col>
                  <a-col :span="6" class="borderallone">日期</a-col>
                  <a-col :span="6" class="borderallone"></a-col>
                </a-row>
              </a-col>

              <a-col :span="4" class="borderallfive">正常投入使用时间</a-col>
              <a-col :span="20">
                <a-row :span="20" class="borderallsix">{{
                  waterrepair.normalInvestment
                }}</a-row>
                <a-row>
                  <a-col :span="6" class="borderallone">负责人</a-col>
                  <a-col :span="6" class="borderallone">{{
                    waterrepair.leadingCadre
                  }}</a-col>
                  <a-col :span="6" class="borderallone">日期</a-col>
                  <a-col :span="6" class="borderallone"></a-col>
                </a-row>
              </a-col>
            </a-row>
            <a-col class="border-img">
              <a-col :span="4" class="border-img1">维修过程</a-col>
              <a-col :span="20" v-viewer>
                <img
                  :src="img.picId"
                  alt=""
                  v-for="(img, imgIndex) in waterrepair.pictureAssociation"
                  :key="imgIndex"
                  class="img"
                />
              </a-col>
            </a-col>
            <a-col
              class="border-img"
              v-if="waterrepair.pictureAssociationOne.length > 0"
            >
              <a-col :span="4" class="border-img1">维修记录</a-col>
              <a-col :span="20" v-viewer>
                <img
                  :src="img.picId"
                  alt=""
                  v-for="(img, imgIndex) in waterrepair.pictureAssociationOne"
                  :key="imgIndex"
                  class="img"
                />
              </a-col>
            </a-col>
          </div>
        </template>
      </a-modal>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import "moment/locale/zh-cn";
import { log } from "video.js";
import "viewerjs/dist/viewer.css";
import Viewer from "v-viewer";
import Vue from "vue";
Vue.use(Viewer);
export default {
  data() {
    return {
      columns: [
        {
          title: "序号",
          dataIndex: "num",
          align: "center",
          customRender: (text, record, index) =>
            `${(this.page.current - 1) * this.page.size + index + 1}`,
        },
        {
          title: "公司名称",
          dataIndex: "taskName",
          width: "17%",
          align: "center",
        },
        {
          title: "排口名称",
          dataIndex: "equipmentName",
          width: "12%",
          align: "center",
        },

        {
          title: "任务区域",
          dataIndex: "taskArea",
          width: "10%",
          align: "center",
        },
        {
          title: "维修时间",
          dataIndex: "time",
          align: "center",
        },
        {
          title: "维修人",
          dataIndex: "executor",
          align: "center",
        },
        {
          title: "维修过程",
          dataIndex: "pictureAssociation",
          width: "10%",
          scopedSlots: { customRender: "pictureAssociation" },
          align: "center",
        },
        {
          title: "维修记录",
          dataIndex: "pictureAssociationOne",
          width: "10%",
          scopedSlots: { customRender: "pictureAssociationOne" },
          align: "center",
        },
        {
          title: "操作",
          dataIndex: "",
          key: "x",
          scopedSlots: { customRender: "action" },
          width: "80px",
          align: "center",
        },
      ],
      data: [],
      title: "",
      moment,
      page: {
        current: 1,
        size: 10,
        equipmentName: "",
        taskName: "",
        taskArea: undefined,
      },
      total: 0,
      dept: {
        current: 1, //获取人员数据
        size: 200,
        roleId: "",
      },
      deptList: [], //用户ID
      //详情弹出框
      visible: false,
      confirmLoading: false,
      selectData: [], //  下拉筛选数据
      //表格数据
      list: [],
      //详情数据
      detail: [],
      //烟气修改
      smokerepair: [],
      waterrepair: "",
    };
  },

  methods: {
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    onSubmit() {
      this.getdata();
    },
    //水质维修
    Wrepair() {
      if (this.waterrepair != "") {
        this.id = this.waterrepair.id;
        this.$api.waterRepair(this.id).then((res) => {
          if (res.data.data.indexOf("数据错误，请联系管理员！") >= 0) {
            this.$message.info("暂无数据");
          } else {
            window.open(res.data.data);
          }
        });
      } else {
        this.$message.info("暂无数据");
      }
      this.showModal(this.detail);
    },
    //烟气维修
    Yrepair() {
      if (this.smokerepair != "") {
        this.id = this.smokerepair.id;
        this.$api.smokeRepair(this.id).then((res) => {
          if (res.data.data.indexOf("数据错误，请联系管理员！") > 0) {
            this.$message.info("暂无数据");
          } else {
            window.open(res.data.data);
          }
        });
      } else {
        this.$message.info("暂无数据");
      }
      this.showModal(this.detail);
    },
    //获取ID用户名
    getDept() {
      this.$api.userFindByPage(this.dept).then((res) => {
        console.log(res);
        this.deptList = res.data.data;
      });
    },
    //分页方法
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a> 上一页 </a>;
      } else if (type === "next") {
        return <a> 下一页 </a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      this.page.current = page;
      this.getdata();
    },
    //弹出框方法,查看详情
    showModal(data) {
      this.detail = data;
      if (this.detail.start == 1) {
        this.$api.smokeRepairListDetail(this.detail.id).then((res) => {
          this.smokerepair = res.data.data;
          this.smokerepair.departureTime = moment(
            parseInt(this.smokerepair.departureTime)
          ).format("YYYY/MM/DD HH:mm:ss");
          this.smokerepair.downtime = moment(
            parseInt(this.smokerepair.downtime)
          ).format("YYYY/MM/DD HH:mm:ss");
          this.visible = true;
        });
      }
      if (this.detail.start == 2) {
        this.$api.waterRepairListDetail(this.detail.id).then((res) => {
          this.waterrepair = res.data.data;
          this.waterrepair.creatTime = moment(
            parseInt(this.waterrepair.creatTime)
          ).format("YYYY/MM/DD");
          this.waterrepair.inspectionTime = moment(
            parseInt(this.waterrepair.inspectionTime)
          ).format("YYYY/MM/DD");
          this.waterrepair.leadingTime = moment(
            parseInt(this.waterrepair.leadingTime)
          ).format("YYYY/MM/DD");
          this.waterrepair.repairTime = moment(
            parseInt(this.waterrepair.repairTime)
          ).format("YYYY/MM/DD");
          this.visible = true;
        });
      }
    },
    //关闭弹窗
    handleCancel(e) {
      console.log("点击关闭按钮");
      this.visible = false;
    },
    //获取数据
    getdata() {
      var that = this;
      this.$api.listFindMaintenanceListPoByPage(this.page).then((res) => {
        if (res.data.code == 0) {
          var result = res.data.data;
          for (var i = 0; i < result.length; i++) {
            if (result[i].equipmentCount == null) {
              result[i].equipmentCount = "";
            }
            if (result[i].equipmentType == null) {
              result[i].equipmentType = "";
            }
          }
          this.data = res.data.data;
          this.data.forEach((item) => {
            if (item.time === null) {
              item.time = "";
            } else {
              item.time = moment
                .unix(item.time / 1000)
                .format("YYYY/MM/DD HH:mm:ss");
            }
          });

          that.data = result;
          this.total = res.data.total;
        }
      });
    },
  },
  mounted() {
    this.getdata();
    this.$api.areaFindPoint(3).then((res) => {
      if (res.data.code == 0) {
        this.selectData = res.data.data;
      }
    });
  },
};
</script>
<style scoped src="../../../../assets/style/warning.css"></style>
<style scoped lang="scss" >
.byimg {
  width: 30px;
  height: 20px;
  margin-left: 10px;
}
::v-deep .solve-img {
  height: 26px;
}
::v-deep .solve-img img {
  width: 24px;
  height: 20px;
  margin-right: 5px;
}
.solve-img {
  display: inline-block;
  justify-content: space-evenly;
}
::v-deep .ant-modal-content {
  height: 700px !important;
  overflow-y: scroll;
}
::v-deep .ant-modal-content::-webkit-scrollbar {
  /*隐藏滚轮*/
  width: 0 !important;
}
.shuju {
  border-bottom: 1px solid #e8e8e8;
  font-size: 14px;
  height: 60px;
  text-align: right;
  line-height: 60px;
}
.img {
  width: 150px;
  height: 100px;
  padding: 20px;
}
.border-img1 {
  border-right: 1px solid #e8e8e8;
  font-size: 14px;
  text-align: center;
}
.border-img {
  border-left: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  line-height: 160px;
  height: 160px;
}
.scroll-bar {
  font-size: 24px;
  color: #4ccbad;
}
.monitorCalibrationRecordPo {
  font-size: 18px;
  text-align: center;
  color: #9fb043;
}
.listcentent {
  font-size: 16px;
  text-align: center;
  color: #bebebe;
  line-height: 30px;
  height: 30px;
}
.ant-row-flex-end {
  margin-top: 30px;
}
#salvenote {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 1%;
  box-sizing: border-box;
}
.solve-img {
  display: flex;
  justify-content: space-evenly;
}
/* 表格样式 */
.tableclass {
  width: 100%;
  height: 86%;
}
#salvenote .solvebtn {
  margin-right: 10px;
  border: none;
  font-weight: 700;
  color: #1890ff;
}

::v-deep#salvenote .ant-table table {
  height: auto;
  border-radius: 0;
}
.bottompage {
  margin-top: 12px;
  float: right;
}
//#salvenote ::v-deep .ant-checkbox-inner {
//  border: 2px solid #2e9685;
//  background-color: rgba(140, 179, 174, 0.5) !important;
//}
//#salvenote .ant-pagination-prev .ant-pagination-item-link,
//.ant-pagination-next .ant-pagination-item-link {
//  border: 0;
//  background-color: rgba(30, 50, 48, 0.5);
//  box-shadow: 0 0 10px 1px #188471 inset;
//}
.ant-form-item {
  color: #bebebe;
  margin-bottom: 10px;
}
// 详情
::v-deep #salvenote .ant-form-item-children {
  color: rgba(255, 255, 255, 0.7);
}
.table-all {
  width: 100%;
}
.borderallq {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  height: 140px;
}
.borderall {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  border-left: 1px solid #e8e8e8;
  font-size: 14px;
  height: 28px;
  text-align: center;
  line-height: 28px;
}
.borderallone {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  font-size: 14px;
  height: 28px;
  text-align: center;
  line-height: 28px;
}
.borderalltwo {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  border-left: 1px solid #e8e8e8;
  font-size: 14px;
  height: 56px;
  text-align: center;
  line-height: 56px;
}
.borderalltwos {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  font-size: 14px;
  height: 56px;
  text-align: center;
  line-height: 56px;
}
.borderallthree {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  font-size: 14px;
  height: 56px;
  text-align: center;
  line-height: 56px;
}
.borderallfour {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  border-left: 1px solid #e8e8e8;
  height: 30px;
}
.borderallfive {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  border-left: 1px solid #e8e8e8;
  font-size: 14px;
  height: 150px;
  text-align: center;
  line-height: 150px;
  white-space: pre-wrap;
}
.borderallsix {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  font-size: 14px;
  height: 122px;
  text-align: center;
  line-height: 94px;
}
.borderallseven {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  border-left: 1px solid #e8e8e8;
  font-size: 14px;
  height: 600px;
  text-align: center;
  line-height: 600px;
}
.borderalleight {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  font-size: 14px;
  height: 170px;
  text-align: center;
  line-height: 170px;
}
.borderallnine {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  font-size: 14px;
  height: 150px;
  text-align: center;
  line-height: 150px;
}
.borderallten {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  border-left: 1px solid #e8e8e8;
  font-size: 14px;
  text-align: center;
}
.borderallbig {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  font-size: 14px;
  height: 120px;
  text-align: center;
  line-height: 120px;
}
.borderallheight {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  border-left: 1px solid #e8e8e8;
  font-size: 14px;
  height: 196px;
  text-align: center;
  line-height: 196px;
}
.borderallheights {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  font-size: 14px;
  height: 112px;
  text-align: center;
  line-height: 112px;
}
.borderallheighta {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  border-left: 1px solid #e8e8e8;
  font-size: 14px;
  height: 420px;
  text-align: center;
  line-height: 420px;
}
.borderallheightb {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  font-size: 14px;
  height: 420px;
  text-align: center;
  line-height: 420px;
}
.borderallF {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  border-left: 1px solid #e8e8e8;
  font-size: 14px;
  height: 112px;
  text-align: center;
  line-height: 112px;
}
.borderallFS {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  font-size: 14px;
  height: 112px;
  text-align: center;
  line-height: 112px;
}
.borderallT {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  border-left: 1px solid #e8e8e8;
  font-size: 14px;
  height: 84px;
  text-align: center;
  line-height: 84px;
}
.borderallTS {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  font-size: 14px;
  height: 84px;
  text-align: center;
  line-height: 84px;
}
.borderallover {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  border-left: 1px solid #e8e8e8;
  font-size: 14px;
  height: 532px;
  text-align: center;
  line-height: 532px;
}
.borderallFF {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  font-size: 14px;
  height: 140px;
  text-align: center;
  line-height: 140px;
}
.borderallS {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  font-size: 14px;
  height: 196px;
  text-align: center;
  line-height: 196px;
}
.bordertop {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  border-left: 1px solid #e8e8e8;
  font-size: 22px;
  height: 45px;
  text-align: center;
  line-height: 45px;
}
</style>

